import React, { PureComponent } from 'react';
import { PanelProps } from '@grafana/data';
import { SimpleOptions } from 'types';
import { v4 as uuidv4 } from 'uuid';
import { Chart } from '@antv/g2';

interface Props extends PanelProps<SimpleOptions> {}

export class SimplePanel extends PureComponent<Props> {
  guid: string;

  data = [
    { genre: 'Sports', sold: 275 },
    { genre: 'Strategy', sold: 115 },
    { genre: 'Action', sold: 120 },
    { genre: 'Shooter', sold: 350 },
    { genre: 'Other', sold: 150 },
  ];

  chart: any;

  constructor(props: any) {
    super(props);
    this.guid = uuidv4();
  }

  componentDidMount() {
    this.chart = new Chart({
      container: this.guid,
      width: this.props.width,
      height: this.props.height,
    });
    // Step 2:
    this.chart.data(this.data);

    this.chart.interval().position('genre*sold');
    // Step 4
    this.chart.render();
  }

  componentDidUpdate() {
    this.draw();
  }

  draw() {
    this.chart.clear();
    this.chart.changeSize(this.props.width, this.props.height);

    // Step 2:
    this.chart.data(this.data);

    this.chart.interval().position('genre*sold');
    // Step 4
    this.chart.render();
  }

  render() {
    return <div id={this.guid}></div>;
  }
}
